<template>
  <MyDialog
    title="忘记密码"
    show-cancel
    :visible="showDialog"
    :ok-loading="btnLoading"
    width="600px"
    @close="close"
    @ok="handleConfirmPwd"
  >
    <el-form
      ref="loginForm"
      label-width="100px"
      :model="loginForm"
      :rules="loginRules"
      auto-complete="on"
    >
      <!-- 手机号获取验证码 -->
      <el-form-item prop="username" label="手机号">
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入手机号"
          name="手机号"
          type="text"
        >
          <template slot="append">
            <el-button v-if="showBtn" class="get-code" @click="getCode">
              获取验证码
            </el-button>
            <span v-else>{{ count }} s</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" label="验证码">
        <el-input
          v-model="loginForm.code"
          placeholder="请输入验证码"
          name="验证码"
          type="text"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="n">
        <el-input
          v-model="loginForm.n"
          show-password
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="c">
        <el-input
          v-model="loginForm.c"
          show-password
          placeholder="请确认密码"
        />
      </el-form-item>
    </el-form>
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
export default {
  mixins: [dialogMixin],
  data() {
    return {
      showBtn: true,
      count: 60,
      btnLoading: false,
      loginRules: {
        username: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        n: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        c: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      loginForm: {
        username: "", //手机号
        code: "", //验证码
        n: "", //新密码
        c: "", //确认密码
      },
    };
  },
  watch: {
    showDialog(val) {
      if (!val) {
        this.$refs.loginForm.resetFields();
        this.showBtn = true;
        this.count = 60;
      }
    },
  },
  methods: {
    getCode() {
      this.$refs.loginForm.validateField("username", (msg) => {
        if (!msg) {
          this.showBtn = false;
          this.$message({
            message: "验证码已发送",
            type: "success",
          });
          let timer = setInterval(() => {
            this.count--;
            if (this.count <= 0) {
              clearInterval(timer);
              this.showBtn = true;
              this.count = 60;
            }
          }, 1000);
        }
      });
    },
    handleConfirmPwd() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //两次密码输入不一致
          if (this.loginForm.n !== this.loginForm.c) {
            this.$message({
              message: "两次密码输入不一致",
              type: "error",
            });
            return;
          }
          this.btnLoading = true;
          setTimeout(() => {
            this.btnLoading = false;
            // this.$message({
            //   message: "密码修改成功",
            //   type: "success",
            // });
            this.close();
          }, 2000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
